<template>
    <div>
        <!-- 头部 -->
        <div>
            <Headler @add="add" />
        </div>
        <!-- 内容 -->
        <ul>
            <Middle :list="list" @del="del" />
        </ul>
        <!-- 页脚 -->
        <Footer :list="list" @set="set" />
    </div>
</template>

<script>
import { nanoid } from 'nanoid'
import Headler from './headler.vue'
import Middle from "./middle.vue"
import Footer from './footer.vue'
export default {
    components: {
        Headler,
        Middle,
        Footer
    },

    data() {
        return {
            list: JSON.parse(sessionStorage.getItem('list')) || [],

        };
    },

    mounted() {

    },

    methods: {
        add(val) {
            console.log(val);
            var obj = { id: nanoid(), name: val, checked: false }
            this.list.unshift(obj)
            sessionStorage.setItem('list', JSON.stringify(this.list))

        },
        del(index) {
            this.list.splice(index, 1)
            sessionStorage.setItem('list', JSON.stringify(this.list))
        },
        set(val) {
            this.list.filter(item => {
                item.checked = val
            })
        }
    },
    computed: {

    },
    watch: {
        // 监听数组的变化
        list: {
            deep: true,
            handler(newval) {
                sessionStorage.setItem('list', JSON.stringify(newval))
            }
        }
    }
};
</script>

<style lang="scss" scoped>
ul {
    list-style: none;


}
</style>